<template>
  <div>
    <van-nav-bar title="影院" left-text="北京" @click-left="clickLeft">
      <template #right>
        <van-icon name="search" size="18" @click="search" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu active-color="#ff5f16">
      <van-dropdown-item :title="title">
        <template #default>
          <ul class="down_box">
            <li
              v-for="(item, index) in cityArr"
              :key="item"
              :class="{ active: index === n }"
              @click="change(index)"
            >
              <div>{{ item }}</div>
            </li>
          </ul>
        </template>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option2" @change="jump" />
      <van-dropdown-item v-model="value3" :options="option3" @change="jump2" />
    </van-dropdown-menu>
  </div>
  <router-view></router-view>
</template>

<script lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const value1 = ref(0);
    const value2 = ref(0);
    const value3 = ref(0);

    const option1 = [
      { text: "北京", value: 0 },
      // { text: "其他地区", value: 1 },
    ];
    const option2 = [
      { text: "APP订票", value: 0 },
      { text: "前台兑换", value: 1 },
    ];
    const option3 = [
      { text: "最近去过", value: 0 },
      { text: "离我最近", value: 1 },
    ];

    const router = useRouter();

    function clickLeft() {
      router.push("/selectCity");
    }

    function jump(value, option) {
      console.log("选中的值:", value);
      console.log("选中的选项:", option);
      if (value == 0) router.push("/cirema/app");
      if (value == 1) router.push("/cirema/front");
    }
    function jump2(value, option) {
      console.log("选中的值:", value);
      console.log("选中的选项:", option);
      if (value == 0) router.push("/cirema/went");
      if (value == 1) router.push("/cirema/near");
    }

    // 点击下拉菜单内容替换标签内容
    const cityArr = ["全城", "丰台区", "密云区", "通州区", "大兴区"];

    const n = ref(0);
    const title = ref("全城");
    const change = (index) => {
      n.value = index;
      title.value = cityArr[index];
    };

    function search() {
      router.push("/rightSearch");
    }

    return {
      value1,
      value2,
      value3,
      option1,
      option2,
      option3,
      clickLeft,
      jump,
      jump2,
      change,
      cityArr,
      n,
      title,
      search,
    };
  },
};
</script>

<style scoped>
.van-nav-bar .van-icon {
  color: black;
}
.van-nav-bar >>> .van-nav-bar__text {
  color: black;
}
li {
  width: 81px;
  height: 30px;
  color: #797d82;
  border-radius: 3px;
  text-align: center;
  height: 30px;
  line-height: 27px;
  border: 1px solid #797d82;
  float: left;
  margin: 5px 0 5px 10px;
  font-size: 12px;
  cursor: pointer;
  padding-top: 1px;
  box-sizing: border-box;
}
</style>
